import React from 'react'
import Profiles from '../subject/profile/Profile'
import { Card, Progress } from 'antd';
import { connect } from 'react-redux';
import {
    CalendarOutlined
} from '@ant-design/icons';
import { useEffect, useState, useCallback } from 'react';
import request from '../../utils/request'
function Profile(props) {

    //学生信息
    const [UserInfo, setUserInfo] = useState([])
    //获取学生信息
    const GetStudent = useCallback(async (value, type) => {
        var { data } = await request.get('user/getStudentInfoByIdOrAccount', {
            params: {
                type: type,
                value: value
            }
        })
        setUserInfo(data.data)



    }, [])
    useEffect(() => {
        GetStudent(props.userInfo.id, 'id')

    }, [])
    return (
        <>
            <Profiles>
                <Card title={<>
                    <CalendarOutlined />
                    个人效绩
                </>} bordered={false}

                    headStyle={{
                        textAlign: 'left'
                    }}
                    bodyStyle={{
                        textAlign: 'left'
                    }}
                >
                    <span style={{ margin: '10px 0', display: 'block' }}>早起概率</span>
                    <Progress percent={((UserInfo.getupProb) * 100).toFixed(2)} status="active" />
                    <span style={{ margin: ' 10px 0', display: 'block' }}>早归概率</span>
                    <Progress percent={((UserInfo.backProb) * 100).toFixed(2)} status="active" />
                    <span style={{ margin: '10px 0', display: 'block' }}>打扫概率</span>
                    <Progress percent={((UserInfo.cleanProb) * 100).toFixed(2)} status="active" />
                </Card>
            </Profiles>
        </>
    )
}
export default connect(state => ({ userInfo: state.userInfo }))(Profile)
